<template>
  <main>
    <div id="noBody" v-if="!hasBody">
      <h3>空空如也~</h3>
    </div>
    <div id="concernList" v-else>

      <div class="dynamic" v-for="(value,key) in collectionList" :key="key">
        <div class="isNull" v-if="!value.context">
          <h3>你收藏的内容被删除啦~~</h3>
          <el-button @click="deleteCollection(value)">删除此收藏</el-button>
        </div>
        <div v-else class="notNull">
          <header>
            <h3>{{getName(value.uid,value.type)||'空白用户名'}}</h3>
            <p>{{getTime(value.createTime)}}</p>
          </header>
          <article>
            {{value.context}}
          </article>
          <footer>
            <i class="el-icon-caret-top">赞 &nbsp;{{value.likeNum}}</i>
            <i style="justify-content:center" class="el-icon-s-comment">评论</i>
            <i @click="cancelCollection(value.id)" style="justify-content:flex-end" class="el-icon-delete">删除</i>
          </footer>

        </div>
      </div>

    </div>
  </main>
</template>

<script>
import {delCollection, getCollectionList} from "../../network/user";
import {getTimeBefore} from "../../untils/timeBefore";
import {unFavorite} from "../../network/dynamic";
export default {
  name: "myConcern",
  data(){
    return{
      hasBody:true,
      uid:localStorage.getItem("userId"),
      type:localStorage.getItem("userType"),
      collectionList:[],
      map:[]
    }
  },

  created() {
    this.getData()
  },
  methods:{
    deleteCollection(id){
      delCollection(id)
      .then(res=>{
        this.$message.success('处理成功~')
        console.log(res)
        this.getData()
      })
    },
    cancelCollection(did){
      unFavorite(did,this.type,this.uid)
      .then(res=>{
        console.log(res)
        this.$message.success(res.data.msg)
        this.getData()
      })
    },

    getTime(time){
      return getTimeBefore(time)
    },
    getName(uid,type){
      if(type=='company'){
        console.log(this.map['1_company'].companyName)
        return this.map[uid+'_'+type].companyName;
      }else if(type=='university'){
        console.log(this.map[uid+'_'+type].universityName)
        return this.map[uid+'_'+type].universityName
      }else {
        console.log(this.map[uid+'_'+type].studentName)
        return this.map[uid+'_'+type].studentName
      }

    },
    getData(){
      getCollectionList(this.uid,this.type)
          .then(res=>{
            console.log(res)
            this.collectionList=res.data.extend.collectionDynamic
            this.map=res.data.extend.unitMap
            this.hasBody=this.collectionList.length
          })
    }
  }
}
</script>

<style lang="stylus" scoped>
fontColor=rgb(109,109,109)
main
  width 70%
  min-height 300px
  background-color white
  display flex
  justify-content center
#noBody
  display flex
  justify-content center
  align-items center
  color fontColor
.isNull
  box-shadow 0 0 1px gray
  width 100%
  height 120px
  display flex
  flex-direction column
  justify-content center
  align-items center
  color fontColor
  &:hover
    box-shadow 0 0 2px gray
.dynamic
  width 65%
  margin 10px
  box-sizing border-box
  padding 10px
#concernList
  width 100%
  display flex
  align-items center
  flex-direction column
  & *
    margin 0
.notNull
  box-sizing border-box
  padding 15px
  width 100%
  display flex
  box-shadow 0 0 1px gray
  flex-direction column
  justify-content space-between
  word-break break-all
  &:hover
    box-shadow 0 0 2px gray
  & header
    width 100%
    display flex
    justify-content space-between
  & article
    margin-top 10px
    font-size 14px
    width 100%
    color fontColor
  & footer
    width 100%
    height 24px
    display flex
    align-items flex-end
    justify-content space-between
    & i
      width 80px
      cursor pointer
      display flex

</style>